import { getStyle } from './util'

export const loadMore = {
    bind: (el, binding) => {
        let windowHeight = window.screen.height;
        let height;
        let setTop;
        let paddingBottom;
        let marginBottom;
        let requestFram;
        let oldScrollTop;
        let scrollEl;
        let heightEl;
        let scrollType = el.attributes.type && el.attributes.type.value;
        let scrollReduce = 2;
        if (scrollType === 'local') { // 表示仅局部滚动
            scrollEl = el;
            heightEl = el.children[0];
        } else { // 全局滚动
            scrollEl = document.body;
            heightEl = el;
        }

        el.addEventListener('touchstart', () => {
            height = heightEl.clientHeight;
            setTop = el.offsetTop;
            paddingBottom = getStyle(el, 'paddingBottom');
            marginBottom = getStyle(el, 'marginBottom');
        }, false)

        el.addEventListener('touchmove', () => {
            loadMore();
        }, false)

        el.addEventListener('touchend', () => {
            oldScrollTop = scrollEl.scrollTop;
            moveEnd();
        }, false)

        const moveEnd = () => {
            requestFram = requestAnimationFrame(() => {
                if (scrollEl.scrollTop != oldScrollTop) {
                    oldScrollTop = scrollEl.scrollTop;
                    moveEnd()
                } else {
                    cancelAnimationFrame(requestFram);
                    height = heightEl.clientHeight;
                    loadMore();
                }
            })
        }

        const loadMore = () => {
            if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
                binding.value();
            }
        }
    }
}


